Related Issue

• Closes: ui/ux: missing transition entry animation on Login component container #514

Description

Implemented smooth entry animations for the Login page to match the existing Signup page transition behavior and improve authentication flow consistency.

Changes Made

Login.tsx

• Added framer-motion support:

  import { motion } from "framer-motion";

• Animated branding section using <motion.div>:

  • initial={{ opacity: 0, y: -20 }}
  • animate={{ opacity: 1, y: 0 }}
  • transition={{ duration: 0.6 }}

• Animated login form card using <motion.div>:

  • initial={{ opacity: 0, y: 30 }}
  • animate={{ opacity: 1, y: 0 }}
  • transition={{ duration: 0.6, delay: 0.2 }}

• Fixed unclickable navigation links by adding:

  pointer-events-none

  to the bottom gradient overlay div.

Signup.tsx

• Updated the "Sign in here" link styling for consistency with Login page:

  className="ml-1 text-purple-400 hover:text-purple-300 transition-colors duration-300"

• Fixed unclickable navigation links by adding:

  pointer-events-none

  to the bottom gradient overlay div.

Summary of Improvements

• Added smooth entry animations to Login page
• Matched Signup animation behavior for cohesive route transitions
• Improved visual continuity between authentication pages
• Fixed pointer-event blocking issue affecting navigation links
• Unified authentication link styling across Login and Signup pages

How Has This Been Tested?

Animation Transition Test

1. Started the application locally
2. Navigated to /login
3. Clicked "Sign up here" and observed smooth animated transition
4. Clicked "Sign in here" from Signup page
5. Verified Login page now animates smoothly instead of appearing abruptly

Link Interaction Test

• Confirmed all authentication navigation links are clickable
• Verified overlay no longer blocks pointer events

UI Consistency Test

• Confirmed matching animation timing and staggered effects
• Verified consistent link styling across both authentication pages

Screenshots (if applicable)

• Added screen recordings/screenshots demonstrating:

  • Smooth Login page entry animation
  • Consistent transitions between Login and Signup pages
  • Updated authentication link styling

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update